<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>watch</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>watch</h1>
    <hr/>
    <div id="app">
        <p>当前温度: {{temperature}} ℃</p>
        <P>建议穿衣: {{dressing}}</P>
        <p>
            <button @click="add">升高温度</button>
            <button @click="reduce">降低温度</button>
        </p>
    </div>

    <script>

        var dressArr = ['棉衣羽绒服','夹克长裙','T恤短袖'];
        var app = new Vue({
            el: '#app',
            data: {
                temperature: 14,
                dressing: '夹克长裙',
                item: {
                    name: 'superbone',
                    age: 30
                }
            },
            methods: {
                add: function(){
                    this.temperature += 3;
                    this.item.age++;
                },
                reduce: function(){
                    this.temperature -= 3;
                    this.item.age--;
                }
            },
            watch: {
                /**
                    temperature:    要监控的值
                    newVal:         新的值
                    oldVal:         旧的值   
                */
                temperature: function(newVal,oldVal){
                    if(newVal>=26){
                        this.dressing = dressArr[2];
                    }else if(newVal>0 && newVal<26){
                        this.dressing = dressArr[1];
                    }else{
                        this.dressing = dressArr[0];
                    }
                }
            }
        });

        //在外部使用watch
        app.$watch('item.age',function(newVal,oldVal){
            console.log('新的值<'+newVal+'>,旧的值<'+oldVal+'>');
        });
    </script>

</body>
</html>